<template>
  <div class="detail-container w1000">
    <div class="title">
      <div class="title-info in-block">
        <div class="names">
          <el-tooltip :content="name" :disabled="!enName">
            <span :class="[enName ? 'en-name' : '']" class="name">{{ name }}</span>
          </el-tooltip>
          <span v-if="alias" class="alias">{{ alias }}</span>
        </div>
        <div v-if="showState" class="state">
          <slot name="state"/>
        </div>
      </div>
      <div v-if="showBtns" class="title-btns">
        <slot name="btns"/>
      </div>
    </div>
    <slot name="content"/>
    <slot/>
    <slot name="footer"/>
  </div>
</template>

<script>
export default {
  name: "BaseCard",
  props: {
    name: String,
    alias: String,
    enName: Boolean,
    showBtns: Boolean,
    showState: Boolean,
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/variables";

.detail-container {
  color: #333;
  padding: 0 5%;
  background: #fff;
  box-shadow: 0px 1px 8px 0px rgba(182, 182, 182, 0.28);
  font-weight: 400;
}

.title {
  width: 100%;
  padding: 10px 0 5px;
  display: block;
  font-size: 18px;
  font-weight: 700;
  align-items: center;
  margin-bottom: 0;
  border-bottom: 1px solid #EBEBEB;
  justify-content: space-between;

  .in-block {
    display: inline-block;
    line-height: 40px;
  }

  .title-info {
    vertical-align: middle;
    color: #333;
    width: calc(100% - 260px);
    display: inline-block;
    height: 40px;
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    .names {
      display: inline-block;
      font-size: $base-title-font-size;

      .name {
        font-weight: 700;
      }

      .en-name {
        font-family: sans-serif !important;
      }

      .alias {
        font-weight: 400;
        margin-left: 16px;
      }
    }

    .state {
      display: inline-block;
      margin-left: 10px;
      font-size: $base-tag-font-size;
    }

    .other {
      display: block;
      font-size: 14px;
      margin-top: 10px;

      .other-info {
        display: inline;
        margin-right: 15px;
      }

      .icon {
        margin-right: 8px;
        vertical-align: middle;
      }

      .other-text {
        display: inline-block;
        vertical-align: middle;
        opacity: 0.5;
      }
    }
  }

  .title-btns {
    width: 240px;
    margin-left: 20px;
    text-align: right;
    display: inline-block;
    //float: right;
    vertical-align: middle;
    line-height: 40px;
  }
}

.no-border {
  border-bottom: none;
  padding-top: 2%;
  padding-bottom: 2%;
}

::v-deep.section {
  border-bottom: 1px dashed #EBEBEB;
  padding: 10px 0;

  .description {
    .label {
      width: 120px;
      color: #0f0e0e;
      font-size: $base-content-font-size;
    }

    .content {
      width: calc(100% - 120px);
      white-space: normal !important;
      font-size: $base-content-font-size;
    }
  }

}
</style>
